<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add" onclick="funAdd();">
</div>

    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="funDelete(this);">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="funDelete(this);">删除</a></td>
        </tr>

    </table>

</body>
<script>
    function funAdd() {
        //新添行元素
        let tr = document.createElement("tr")
        //新建列元素
        let nameTd = document.createElement("td")
        let ageTd = document.createElement("td")
        let genderTd = document.createElement("td")
        let deleteTd = document.createElement("td")
        //将列添加到行里
        tr.appendChild(nameTd)
        tr.appendChild(ageTd)
        tr.appendChild(genderTd)
        tr.appendChild(deleteTd)
        //获取输入的信息
        let name = document.getElementById("name").value
        let age = document.getElementById("age").value
        let gender = document.getElementById("gender").value
        //创建文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //将信息添加到文本元素内
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //创建超链接a元素
        let a = document.createElement("a");
        a.setAttribute("onclick","funDelete(this)")
        a.setAttribute("href","JavaScript:void(0);")
        a.appendChild(document.createTextNode("删除"))
        //将超链接元素添加到deleteTd列中
        deleteTd.append(a)
        //将新建行添加到表中
        let table = document.getElementById("table");
        table.appendChild(tr)
    }

    function funDelete(obj){
        //获取table元素
        let table = obj.parentElement.parentElement.parentElement;
        //获取所要删除列的行元素
        let tr = obj.parentElement.parentElement;
        //通过table删除字标签tr
        table.removeChild(tr)
    }
</script>
</html>